<template>
  <div
    class="tag_view_home"
    v-if="mainData != null"
    :style="{ width: `${mainData.w + 100}px`, height: `${mainData.h + 100}px` }"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      :width="`${mainData.w}px`"
      :height="`${mainData.h}px`"
    >
      <component
        v-for="(item, index) in mainData.tags"
        :key="index"
        :is="item.name"
        v-model="item.data"
        :lid="item.id"
      ></component>
    </svg>
  </div>
</template>
<script>
import svgLine from "@/components/Canvas-Main/SvgComp/SvgLine.vue";
import svgRect from "@/components/Canvas-Main/SvgComp/SvgRect.vue";
import svgFont from "@/components/Canvas-Main/SvgComp/SvgFont.vue";
import svgImage from "@/components/Canvas-Main/SvgComp/SvgImage.vue";
import svgQrCode from "@/components/Canvas-Main/SvgComp/SvgQrCode.vue";
import svgBarcode from "@/components/Canvas-Main/SvgComp/SvgBarcode.vue";
export default {
  props: ["data"],
  components: {
    svgLine,
    svgRect,
    svgFont,
    svgImage,
    svgQrCode,
    svgBarcode,
  },
  data() {
    return {
      mainData: null,
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    onLoad() {
      var data = this.$props.data;
      console.log(data);
      if (data) {
        this.mainData = data;
      } else {
      }
    },
  },
};
</script>
<style lang="less">
.tag_view_home {
  margin-top: 1.25rem;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: black;
  overflow: hidden;
  border: 1px solid black;
}
</style>
